<%--
  Created by IntelliJ IDEA.
  User: GORDEN
  Date: 2021/3/31
  Time: 0:20
  To change this template use File | Settings | File Templates.
--%>
<%@ include file="../common/Top.jsp" %>

<html>
<head>
    <title>EditMyAccount--${sessionScope.username}</title>
</head>
<body>

<!-- breadcrumb-section start -->
<nav class="breadcrumb-section theme1 breadcrumb-bg1">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="breadcrumb-title text-center my-20">
                    <h2 class="title text-dark text-capitalize">my account</h2>
                </div>
            </div>
            <div class="col-12">
                <ol class="breadcrumb bg-transparent m-0 p-0 align-items-center justify-content-center">
                    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">
                        my account page
                    </li>
                </ol>
            </div>
        </div>
    </div>
</nav>
<!-- breadcrumb-section end -->

<!-- product tab start -->
<div class="my-account pb-40">
    <div class="container grid-wraper">
        <div class="row">
            <div class="col-12">
                <h3 class="title text-capitalize">my account</h3>
            </div>
            <!-- My Account Tab Menu Start -->
            <div class="col-lg-3 col-12 mb-30">
                <div class="myaccount-tab-menu nav" role="tablist">
                    <a href="#dashboad" data-toggle="tab"><i class="fas fa-tachometer-alt"></i>
                        Dashboard</a>

                    <a href="#orders" data-toggle="tab" class="get-orderlist"><i class="fa fa-cart-arrow-down"></i>
                        Orders</a>

                    <a href="#download" data-toggle="tab"><i class="fas fa-cloud-download-alt"></i>
                        Download</a>

                    <a href="#payment-method" data-toggle="tab"><i class="fa fa-credit-card"></i>
                        Payment
                        Method</a>

                    <a href="#address-edit" data-toggle="tab"><i class="fa fa-map-marker"></i>
                        address</a>

                    <a href="#account-info" data-toggle="tab" class="active"><i class="fa fa-user"></i> Account
                        Details</a>

                    <a href="login.html"> <i class="fas fa-sign-out-alt"></i>Logout</a>
                </div>
            </div>
            <!-- My Account Tab Menu End -->

            <!-- My Account Tab Content Start -->
            <div class="col-lg-9 col-12 mb-30">
                <div class="tab-content" id="myaccountContent">
                    <!-- Single Tab Content Start -->
                    <div class="tab-pane fade" id="dashboad" role="tabpanel">
                        <div class="myaccount-content">
                            <h3>Dashboard</h3>

                            <div class="welcome mb-20">
                                <p>Hello, <strong>Alex Tuntuni</strong> (If Not <strong>Tuntuni !</strong><a href="https://htmldemo.hasthemes.com/zonan-preview/zonan/login-register.html" class="logout"> Logout</a>)</p>
                            </div>

                            <p class="mb-0">From your account dashboard. you can easily check &amp; view your recent orders, manage your shipping and billing addresses and edit your password and account details.</p>
                        </div>
                    </div>
                    <!-- Single Tab Content End -->

                    <!-- Single Tab Content Start -->
                    <div class="tab-pane fade" id="orders" role="tabpanel">
                        <div class="myaccount-content">
                            <h3>Orders</h3>

                            <div class="myaccount-table table-responsive text-center">
                                <table class="table table-bordered">
                                    <thead class="thead-light">
                                    <tr>
                                        <th>Order ID</th>
                                        <th>Date</th>
                                        <th>Total Price</th>
                                    </tr>
                                    </thead>

                                    <tbody>
<%--                                    <tr>--%>
<%--                                        <td>1</td>--%>
<%--                                        <td>Mostarizing Oil</td>--%>
<%--                                        <td>Aug 22, 2018</td>--%>
<%--                                        <td>Pending</td>--%>
<%--                                        <td>$45</td>--%>
<%--                                        <td><a href="https://htmldemo.hasthemes.com/zonan-preview/zonan/shopping-cart.html" class="ht-btn black-btn">View</a>--%>
<%--                                        </td>--%>
<%--                                    </tr>--%>
<%--                                    <tr>--%>
<%--                                        <td>2</td>--%>
<%--                                        <td>Katopeno Altuni</td>--%>
<%--                                        <td>July 22, 2018</td>--%>
<%--                                        <td>Approved</td>--%>
<%--                                        <td>$100</td>--%>
<%--                                        <td><a href="https://htmldemo.hasthemes.com/zonan-preview/zonan/shopping-cart.html" class="ht-btn black-btn">View</a>--%>
<%--                                        </td>--%>
<%--                                    </tr>--%>
<%--                                    <tr>--%>
<%--                                        <td>3</td>--%>
<%--                                        <td>Murikhete Paris</td>--%>
<%--                                        <td>June 12, 2017</td>--%>
<%--                                        <td>On Hold</td>--%>
<%--                                        <td>$99</td>--%>
<%--                                        <td><a href="https://htmldemo.hasthemes.com/zonan-preview/zonan/shopping-cart.html" class="ht-btn black-btn">View</a>--%>
<%--                                        </td>--%>
<%--                                    </tr>--%>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- Single Tab Content End -->

                    <!-- Single Tab Content Start -->
                    <div class="tab-pane fade" id="download" role="tabpanel">
                        <div class="myaccount-content">
                            <h3>Downloads</h3>

                            <div class="myaccount-table table-responsive text-center">
                                <table class="table table-bordered">
                                    <thead class="thead-light">
                                    <tr>
                                        <th>Product</th>
                                        <th>Date</th>
                                        <th>Expire</th>
                                        <th>Download</th>
                                    </tr>
                                    </thead>

                                    <tbody>
                                    <tr>
                                        <td>Mostarizing Oil</td>
                                        <td>Aug 22, 2018</td>
                                        <td>Yes</td>
                                        <td><a href="#" class="ht-btn black-btn">Download File</a></td>
                                    </tr>
                                    <tr>
                                        <td>Katopeno Altuni</td>
                                        <td>Sep 12, 2018</td>
                                        <td>Never</td>
                                        <td><a href="#" class="ht-btn black-btn">Download File</a></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!-- Single Tab Content End -->

                    <!-- Single Tab Content Start -->
                    <div class="tab-pane fade" id="payment-method" role="tabpanel">
                        <div class="myaccount-content">
                            <h3>Payment Method</h3>

                            <p class="saved-message">You Can't Saved Your Payment Method yet.</p>
                        </div>
                    </div>
                    <!-- Single Tab Content End -->

                    <!-- Single Tab Content Start -->
                    <div class="tab-pane fade" id="address-edit" role="tabpanel">
                        <div class="myaccount-content">
                            <h3>Billing Address</h3>

                            <address>
                                <p><strong>Alex Tuntuni</strong></p>
                                <p>1355 Market St, Suite 900 <br>
                                    San Francisco, CA 94103</p>
                                <p>Mobile: (123) 456-7890</p>
                            </address>

                            <a href="#" class="ht-btn black-btn d-inline-block edit-address-btn"><i
                                    class="fa fa-edit"></i>Edit Address</a>
                        </div>
                    </div>
                    <!-- Single Tab Content End -->

                    <!-- Single Tab Content Start -->
                    <div class="tab-pane fade active show" id="account-info" role="tabpanel">
                        <div class="myaccount-content">
                            <h3>Account Details -- ${sessionScope.account.username}</h3>

                            <div class="account-details-form">
                                <form action="editAccount" method="post">
                                    <div class="row">
                                        <div class="col-lg-6 col-12 mb-30">
                                            <input id="first-name" placeholder="First Name" type="text" value="${sessionScope.account.firstName}" name="firstName">
                                        </div>

                                        <div class="col-lg-6 col-12 mb-30">
                                            <input id="last-name" placeholder="Last Name" type="text" value="${sessionScope.account.lastName}" name="lastName">
                                        </div>

                                        <div class="col-12 mb-30">
                                            <input id="phone-number" placeholder="Phone Number" type="text" value="${sessionScope.account.phone}" name="phone">
                                        </div>

                                        <div class="col-12 mb-30">
                                            <input id="email" placeholder="Email Address" type="email" value="${sessionScope.account.email}" name="email">
                                        </div>

                                        <div class="col-12 mb-30">
                                            <input id="addr-1" placeholder="First Address" type="text" value="${sessionScope.account.address1}" name="address1">
                                        </div>

                                        <div class="col-12 mb-30">
                                            <input id="addr-2" placeholder="Second Address" type="text" value="${sessionScope.account.address2}" name="address2">
                                        </div>

                                        <div class="col-lg-6 col-12 mb-30">
                                            <input id="account-city" placeholder="City" type="text" value="${sessionScope.account.city}" name="city">
                                        </div>

                                        <div class="col-lg-6 col-12 mb-30">
                                            <input id="account-state" placeholder="State" type="text" value="${sessionScope.account.state}" name="state">
                                        </div>

                                        <div class="col-lg-6 col-12 mb-30">
                                            <input id="account-zip" placeholder="Zip" type="text" value="${sessionScope.account.zip}" name="zip">
                                        </div>

                                        <div class="col-lg-6 col-12 mb-30">
                                            <input id="account-country" placeholder="Country" type="text" value="${sessionScope.account.country}" name="country">
                                        </div>

                                        <div class="col-12 mb-30">
                                            <h4>Password change</h4>
                                        </div>

                                        <div class="col-12 mb-30">
                                            <input id="current-pwd" placeholder="Current Password" type="password" >
                                        </div>

                                        <div class="col-lg-6 col-12 mb-30">
                                            <input id="new-pwd" placeholder="New Password" type="password" name="password">
                                        </div>

                                        <div class="col-lg-6 col-12 mb-30">
                                            <input id="confirm-pwd" placeholder="Confirm Password" type="password" name="repeatedPassword">
                                        </div>

                                        <div class="col-12 mb-30">
                                            <h4>Profile Information</h4>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-md-3">Language Preference:</label>
                                            <div class="col-md-6">
                                                <select class="form-control" name="languagePreference">
                                                    <option>-- please choose --</option>
                                                    <option value="English" selected="selected">English</option>
                                                    <option value="Japanese">Japanese</option>
                                                    <option value="Chinese">Chinese</option>
                                                    <option value="Spanish">Spanish</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-md-3">Favourite Category:</label>
                                            <div class="col-md-6">
                                                <select class="form-control" name="favouriteCategoryId">
                                                    <option>-- please choose --</option>
                                                    <option value="FISH">FISH</option>
                                                    <option selected="selected" value="DOGS">DOGS</option>
                                                    <option value="REPTILES">REPTILES</option>
                                                    <option value="CATS">CATS</option>
                                                    <option value="BIRDS">BIRDS</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="filter-check-box mb-4">
                                            <input type="checkbox" id="20828" required="" name="istOption" value="${sessionScope.account.listOption}">
                                            <label class="checkout" for="20828">Enable MyList</label>
                                        </div>

                                        <div class="filter-check-box mb-4">
                                            <input type="checkbox" id="20829" required="" name="bannerOption" value="${sessionScope.account.bannerOption}">
                                            <label class="checkout" for="20829">Enable MyBanner</label>
                                        </div>

                                        <div class="col-12">
                                            <button class="btn theme-btn--dark1 btn--md" type="submit">Save
                                                Changes</button>
                                        </div>

                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- Single Tab Content End -->
                </div>
            </div>
            <!-- My Account Tab Content End -->
        </div>
    </div>
</div>
<!-- product tab end -->

<%--引入底部--%>
<%@include file="../common/Bottom.jsp" %>


<script src="assets/js/vendor/vendor.min.js"></script>
<script src="assets/js/plugins/plugins.min.js"></script>
<script src="assets/js/main.js"></script>

<a id="scrollUp" href="#top" style="position: fixed; z-index: 214; display: none;"><i class="fas fa-arrow-up"></i></a>

<script>
    $('.get-orderlist').on('click', function () {
        var tbody = $('.tab-pane .table-bordered tbody');
        tbody.children().remove();
        $.ajax({
            type    : "GET",
            url     : "listOrders",
            success : function (data) {
                $.each(data.order_list, function (index, element) {
                    tbody.append('<tr><td><a href="viewOrder?orderId='+element.orderId+
                        '&comeFromListOrders=true">'+element.orderId+'</a></td><td>'+
                        element.orderDate+'</td><td>'+element.totalPrice+'</td></tr>');
                });
            }
        });
    });
</script>

</body>
</html>
